<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        display: flex;
        width: 220px;
        background-color: pink;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    span{
        background-color: red;
        color: #fff;
        padding: 0 4px;
    }
</style>
<body>
    <input type="text" id="input">
    <button>
        添加
    </button>
    <div class="list">
    </div>
    
    <script>
        //整体思路，先添加一个输入框，输入数据
        //再添加一个增加的按钮
        //再添加一个ul列表
        //添加完成之后写js文件
        //首先要获取到添加框、按钮、存放数据的列表
        //然后给添加按钮绑定个事件
        //把input中输入的值用变量存起来
        //然后创造一个新的li元素，创造一个新的文本节点
        //把新的文本节点放进li中，把li再放入到ul中
        //数据添加完成之后进行删除
        //删除ul中的li

        //本实例中遇到的问题是无法添加一个删除按钮

        let inpu = document.querySelector('input'); //获取input
        let btn = document.querySelector('button'); //获取button
        let ul = document.querySelector('.list'); //获取list
        var input = document.getElementById('input');
        var box1List = document.querySelectorAll('.box1')//获取所有列表
        var num = 0;//id相当于下表
       

        //给按钮添加一个点击事件，实现添加
        btn.onclick = function(){
            let val = inpu.value;  //input中的值赋给变量存储起来
            // let li = document.createElement('li');  //把新创建的li赋给li变量储存起来
            // let text = document.createTextNode(val); //把新创建的input中的值通过text变量存储起来
            // li.appendChild(text);  //li中新增加一个节点
            // ul.appendChild(li);  //ul中新增加一个li节点
            let li = `<div id=${num} class="box1">${input.value}<span onclick="delelt(this)" id=${num}>删除</span></div>`;
            ul.innerHTML += li;
            num++;
        }
        //删除标签
        function delelt(e){
            //num等于0，就是每次更新id(下标)
            num = 0;
            //每删除一次就获取一次数量
            box1List = document.querySelectorAll('.box1');
            ul.removeChild(box1List[e.id]);
            if(ul.children.length>0){
                for(let i =0;i<ul.children.length;i++){
                    ul.children[i].id = i
                    ul.children[i].children[0].id = i;
                    num++
                }
            }
        }
        //删除元素
        // ul.onclick = function(e){
        //     // console.log(e);
        //     ul.removeChild(e.target)
        // }
    </script>
</body>
</html>